<template>
  <vue-chart :option="chartOption" autoresize />
</template>

<script>
import { getColor } from '../../utils/index'

export default {
  name: 'LiquidFill',
  data() {
    return {
      chartOption: {}
    }
  },
  methods: {
    renderChart() {
      const value = 0.2566
      this.chartOption = {
        series: [
          {
            type: 'liquidFill',
            data: [value],
            radius: '80%',
            label: {
              formatter: () => {
                return `${(value * 100).toFixed(2)}%`
              },
              textStyle: {
                fontSize: 36,
                color: '#999',
                fontWeight: 'normal'
              },
              insideColor: 'red',
              position: ['50%', '50%']
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 1,
                borderColor: '#aaa4a4',
                color: 'none',
                shadowBlur: 0,
                shadowColor: '#fff'
              }
            },
            backgroundStyle: {
              color: '#fff'
            },
            itemStyle: {
              shadowBlur: 0,
              shadowColor: '#fff'
            },
            amplitude: 8,
            // color: [getColor(value)]
            color: ['rgba(97,216,0,.7)', 'rgba(97,216,0,.5)', 'rgba(97,216,0,.3)']
          }
        ]
      }
    }
  },
  mounted() {
    this.renderChart()
  }
}
</script>

<style scoped>
.chart {
  height: 190px;
  width: 100%;
}
</style>
